<html class="ui-mobile">

<head>
    <title>cliente</title>
	
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <link type="text/css" href="jquery.ui.chatbox.css" rel="stylesheet" />
	<link type="text/css" href="bootstrap.css" rel="stylesheet" />
	<link type="text/css" href="bootstrap.min.css" rel="stylesheet" />
    <!--<script src="http://code.jquery.com/jquery-1.9.1.js"></script>-->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    
	 <script>
		$(function() {
		$( "#from" ).datepicker({
		defaultDate: "+1w",
		changeMonth: true,
		numberOfMonths: 3,
		onClose: function( selectedDate ) {
		$( "#to" ).datepicker( "option", "minDate", selectedDate );
		}
		});
		$( "#to" ).datepicker({
		defaultDate: "+1w",
		changeMonth: true,
		numberOfMonths: 3,
		onClose: function( selectedDate ) {
		$( "#from" ).datepicker( "option", "maxDate", selectedDate );
		}
		});
		});
	</script>
	

	<script>
		

	</script>

    <style>
        #format {
            margin-top: 2em;
        }
    </style>

    <script type="text/javascript" src="jquery.ui.chatbox.js"></script>
    <script type="text/javascript" src="chatboxManager.js"></script>
    <!--<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">-->
    <script>
        $(function () {
            $("#check").button();
            $("#format").buttonset();
        });
    </script>
	<script>
	  $(function() {
		$( "#dialog-confirm" ).dialog({
		  resizable: false,
		  height:300,
		  width: 400,
		  modal: true,
		  buttons: {
			"Delete all items": function() {
			  $( this ).dialog( "close" );
			},
			Cancel: function() {
			  $( this ).dialog( "close" );
			}
		  }
		});
	  });
	 </script>
	 
	 <style>
	  #feedback { font-size: 1.4em; }
	  #selectable .ui-selecting { background: #FECA40; }
	  #selectable .ui-selected { background: #F39814; color: white; }
	  #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
	  #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
	  </style>
	  <script>
	  $(function() {
		//$( "#selectable" ).selectable();
	  });
	  </script>
	 
	 <style>
	  #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
	  #draggable p { cursor: move; }
	  #draggable p1 { cursor: move; }
	  </style>
	<script>
		$(function() {
			$( "#sel" ).append($("<option>").text("texto 1").attr( "value" , 1 ));
			$( "#sel" ).append($("<option>").text("texto 2").attr( "value" , 2 ));
			$( "#sel" ).append($("<option>").text("texto 3").attr( "value" , 3 ));
			$( "#sel" ).append($("<option>").text("texto 4").attr( "value" , 4 ));
			$( "#sel" ).on('change', function() {
			  alert( this.value ); // or $(this).val()
			});
		});
	</script>
	
    <script type="text/javascript">
        $(document).ready(function () {
            var box = null;
            var box2 = null;
            /*
            $("input[type='button']").click(function (event, ui) {
                if (box) {
                    box.chatbox("option", "boxManager").toggleBox();
                } else {
                    box = $("#chat_div").chatbox({
                        id: "id1",
                        user: {
                            key: "value"
                        },
                        title: "otherUser.name",
                        messageSent: function (id, user, msg) {
                            $("#log").append(id + " said: " + msg + "<br/>");
                            $("#chat_div").chatbox("option", "boxManager").addMsg(id, msg);
                        }
                    });
                }
            });
*/

            var counter = 0;
            var idList = new Array();

            var broadcastMessageCallback = function (from, msg) {
                for (var i = 0; i < idList.length; i++) {
                    chatboxManager.addBox(idList[i]);
                    $("#" + idList[i]).chatbox("option", "boxManager").addMsg(from, msg);
                }
            }

            // chatboxManager is excerpt from the original project
            // the code is not very clean, I just want to reuse it to manage multiple chatboxes
            chatboxManager.init({
                messageSent: broadcastMessageCallback
            });

			$("#toggle").addClass('ui-chatbox-button');
			


			$( "#radioContainer" ).buttonset();
			/*
			$("#labelRadioSE").show(function(event) {
				$(this).button();
            })

            $("#labelRadioSE").click(function(event) {
				if (!$("#uiRadioSE").is(":checked")) {
					$("#uiRadioSE2").prop('checked', false);
					$("#uiRadioSE").prop('checked', true);
				}
			})

            $("#labelRadioSE2").show(function(event) {
				$(this).button();
            })
            $("#labelRadioSE2").click(function(event) {
				if (!$("#uiRadioSE").is(":checked")) {
					$("#uiRadioSE2").prop('checked', false);
					$("#uiRadioSE").prop('checked', true);
				}
			})
*/



            $("input[type='button']").click(function (event) {
                counter++;
                var id = "box" + counter;
                idList.push(id);
                chatboxManager.addBox(id, {
                    dest: "dest" + counter, // not used in demo
                    title: "box" + counter,
                    first_name: "First" + counter,
                    last_name: "Last" + counter
                    //you can add your own options too
                });
                event.preventDefault();
            });

        });
    </script>

	<script>
		$(function() {
			$( "#draggable" ).draggable({ handle: "p" });
			$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
			$( "div, p" ).disableSelection();
		});
	</script>
	<script>
	$(function() {
		$( "#radio" ).buttonset();
	});
	</script>
</head>

<body class="ui-mobile-viewport ui-overlay-a">


	

    <div class="container">
        <div class="content">

			<ol id="selectable">
			  <li class="ui-state-default">1</li>
			  <li class="ui-state-default">2</li>
			  <li class="ui-state-default">3</li>
			  <li class="ui-state-default">4</li>
			  <li class="ui-state-default">5</li>
			  <li class="ui-state-default">6</li>
			  <li class="ui-state-default">7</li>
			  <li class="ui-state-default">8</li>
			  <li class="ui-state-default">9</li>
			  <li class="ui-state-default">10</li>
			  <li class="ui-state-default">11</li>
			  <li class="ui-state-default">12</li>
			</ol>
		
		<form>
			<div id="dialog-confirm" title="Solicitar ayuda">

				<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>¿Que tipo de ayuda necesita?</p>

				<div id="radioContainer">
					<input id="uiRadioSE" name="uiRadio" checked="checked" type="radio" style="">
					<label id="labelRadioSE" for="uiRadioSE">Cooperacion</label>

					<input id="uiRadioSE2" name="uiRadio" type="radio" style="">
					<label id="labelRadioSE2" for="uiRadioSE2">Reasignacion</label>
				</div>
				<div id="textAreaContainer">
					<textarea id="txtMsg"></textarea>
				</div>
			</div>
		</form>

			<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
		
            <p>It will not work untill necessary scripts and stylesheets are properly loaded, check out the code.</p>
            <input id="toggle" type="button" name="toggle" value="toggle" />

			<select id="sel" class="form-control">
			</select>
			
			<div data-role="content">
				En proceso - Sistema Experto
				<table class="table">
					<thead>
						<tr><th> ID Sesion </th>
						<th> Cliente </th>
						<th> Act. S.E. </th>
						<th> Act. U. </th>
						<th> Total </th>
						<th> Acción </th>
					</tr></thead>
					<tbody id="list_sessions_se"><tr class="warning"><td>1</td><td>cliente</td><td>00:00:00</td><td>00:00:56</td><td>00:00:56</td><td><a onclick="showChat(1,'cliente',true)">Ver</a></td></tr></tbody>
				</table>
			</div>

			
			<div id="draggable" class="ui-widget-content">
			  <p class="ui-widget-header">I can be dragged only by this handle</p>
			</div>
			 
			<div id="draggable2" class="ui-widget-content">
			  <p>You can drag me around&hellip;</p>
			  <p class="ui-widget-header">&hellip;but you can't drag me by this handle.</p>
			</div>
			
			<label for="from">From</label>
			<input type="text" id="from" name="from">
			<label for="to">to</label>
			<input type="text" id="to" name="to">
        </div>
    </div>
</body>

</html>